<template>
    <Poptip   content="content" placement="bottom" v-model="show" >
        <Button type="success">选择图标</Button>
        <div   slot="content">
            <Input v-model="search" clearable/>
            <br/>
            <Row :gutter="10"  style="line-height: 30px; height: 300px; min-width: 300px; overflow-y: auto ;">
                <i-col :span="8" v-for="icon in faIconsFilter" :key="icon" style="cursor: pointer"  >
                    <i :class="'fa fa-' + icon" @click="changeIcon(icon)"/><span @click="changeIcon(icon)">&nbsp;{{icon}}</span>
                </i-col>
            </Row>
        </div>
    </Poptip>
</template>
<script>

    const faIconsList = [
        "glass","th-large","handshake-o","arrow-right","arrow-up","arrow-down","mail-forward","share","expand","compress","plus","minus","asterisk","th","exclamation-circle","gift","leaf","fire","eye","eye-slash","warning","exclamation-triangle","plane","calendar","th-list","random","comment","magnet","chevron-up","chevron-down","retweet","shopping-cart","folder","folder-open","arrows-v","check","arrows-h","bar-chart-o","bar-chart","twitter-square","facebook-square","camera-retro","key","gears","cogs","comments","remove","thumbs-o-up","thumbs-o-down","star-half","heart-o","sign-out","linkedin-square","thumb-tack","external-link","sign-in","trophy","close","github-square","upload","lemon-o","phone","square-o","bookmark-o","phone-square","twitter","facebook","github","times","unlock","credit-card","rss","hdd-o","bullhorn","bell","certificate","hand-o-right","hand-o-left","hand-o-up","search-plus","hand-o-down","arrow-circle-left","arrow-circle-right","arrow-circle-up","arrow-circle-down","globe","wrench","tasks","filter","briefcase","search-minus","arrows-alt","group","users","chain","link","cloud","flask","cut","scissors","copy","power-off","files-o","paperclip","save","floppy-o","square","navicon","reorder","bars","list-ul","list-ol","music","signal","strikethrough","underline","table","magic","truck","pinterest","pinterest-square","google-plus-square","google-plus","money","gear","caret-down","caret-up","caret-left","caret-right","columns","unsorted","sort","sort-down","sort-desc","sort-up","cog","sort-asc","envelope","linkedin","rotate-left","undo","legal","gavel","dashboard","tachometer","comment-o","trash-o","comments-o","flash","bolt","sitemap","umbrella","paste","clipboard","lightbulb-o","exchange","cloud-download","home","cloud-upload","user-md","stethoscope","suitcase","bell-o","coffee","cutlery","file-text-o","building-o","hospital-o","file-o","ambulance","medkit","fighter-jet","beer","h-square","plus-square","angle-double-left","angle-double-right","angle-double-up","angle-double-down","clock-o","angle-left","angle-right","angle-up","angle-down","desktop","laptop","tablet","mobile-phone","mobile","circle-o","road","quote-left","quote-right","spinner","circle","mail-reply","reply","github-alt","folder-o","folder-open-o","smile-o","download","frown-o","meh-o","gamepad","keyboard-o","flag-o","flag-checkered","terminal","code","mail-reply-all","reply-all","arrow-circle-o-down","star-half-empty","star-half-full","star-half-o","location-arrow","crop","code-fork","unlink","chain-broken","question","info","search","arrow-circle-o-up","exclamation","superscript","subscript","eraser","puzzle-piece","microphone","microphone-slash","shield","calendar-o","fire-extinguisher","inbox","rocket","maxcdn","chevron-circle-left","chevron-circle-right","chevron-circle-up","chevron-circle-down","html5","css3","anchor","unlock-alt","play-circle-o","bullseye","ellipsis-h","ellipsis-v","rss-square","play-circle","ticket","minus-square","minus-square-o","level-up","level-down","rotate-right","check-square","pencil-square","external-link-square","share-square","compass","toggle-down","caret-square-o-down","toggle-up","caret-square-o-up","toggle-right","repeat","caret-square-o-right","euro","eur","gbp","dollar","usd","rupee","inr","cny","rmb","refresh","yen","jpy","ruble","rouble","rub","won","krw","bitcoin","btc","file","list-alt","file-text","sort-alpha-asc","sort-alpha-desc","sort-amount-asc","sort-amount-desc","sort-numeric-asc","sort-numeric-desc","thumbs-up","thumbs-down","youtube-square","lock","youtube","xing","xing-square","youtube-play","dropbox","stack-overflow","instagram","flickr","adn","bitbucket","flag","bitbucket-square","tumblr","tumblr-square","long-arrow-down","long-arrow-up","long-arrow-left","long-arrow-right","apple","windows","android","headphones","linux","dribbble","skype","foursquare","trello","female","male","gittip","sun-o","moon-o","envelope-o","volume-off","archive","bug","vk","weibo","renren","pagelines","stack-exchange","arrow-circle-o-right","arrow-circle-o-left","toggle-left","volume-down","caret-square-o-left","dot-circle-o","wheelchair","vimeo-square","turkish-lira","try","plus-square-o","space-shuttle","slack","envelope-square","volume-up","wordpress","openid","institution","bank","university","mortar-board","graduation-cap","yahoo","google","reddit","qrcode","reddit-square","stumbleupon-circle","stumbleupon","delicious","digg","pied-piper","pied-piper-alt","drupal","joomla","language","barcode","fax","building","child","paw","spoon","cube","cubes","behance","behance-square","steam","tag","steam-square","recycle","automobile","car","cab","taxi","tree","spotify","deviantart","soundcloud","tags","database","file-pdf-o","file-word-o","file-excel-o","file-powerpoint-o","file-photo-o","file-picture-o","file-image-o","file-zip-o","file-archive-o","book","file-sound-o","file-audio-o","file-movie-o","file-video-o","file-code-o","vine","codepen","jsfiddle","life-bouy","life-buoy","bookmark","life-saver","support","life-ring","circle-o-notch","ra","rebel","ge","empire","git-square","git","print","hacker-news","tencent-weibo","qq","wechat","weixin","send","paper-plane","send-o","paper-plane-o","history","heart","camera","circle-thin","header","paragraph","sliders","share-alt","share-alt-square","bomb","soccer-ball-o","futbol-o","tty","font","binoculars","plug","slideshare","twitch","yelp","newspaper-o","wifi","calculator","paypal","google-wallet","bold","cc-visa","cc-mastercard","cc-discover","cc-amex","cc-paypal","cc-stripe","bell-slash","bell-slash-o","trash","copyright","italic","at","eyedropper","paint-brush","birthday-cake","area-chart","pie-chart","line-chart","lastfm","lastfm-square","toggle-off","text-height","toggle-on","bicycle","bus","ioxhost","angellist","cc","shekel","sheqel","ils","meanpath","text-width","align-left","align-center","align-right","align-justify","star","list","dedent","outdent","indent","video-camera","photo","image","picture-o","pencil","map-marker","star-o","adjust","tint","edit","pencil-square-o","share-square-o","check-square-o","arrows","step-backward","fast-backward","backward","user","play","pause","stop","forward","fast-forward","step-forward","eject","chevron-left","chevron-right","plus-circle","film","minus-circle","times-circle","check-circle","question-circle","info-circle","crosshairs","times-circle-o","check-circle-o","ban","arrow-left"
    ]
    export default{
        model: {
            prop: 'value',
            event: 'input'
        },
        props: {
            value: ''
        },
        components: {},
        data: function () {
            return {
                search: '',
                show: false
            }
        },
        computed: {
            faIconsFilter(){
                if(this.search == null || this.search.length == 0){
                    return faIconsList;
                }
                return faIconsList.filter(item => {
                    return item.indexOf(this.search) != -1;
                })
            }
        },
        created: function () {

        },
        methods: {
            changeIcon(icon){
                console.log(icon)
                this.show = false;
                this.$emit("input", icon);
            }
        }
    }
</script>
<style>

</style>